<template>
  <MsuiForm :options="msuiForm" style="padding: 20px">
    <template #area="{ bind, vOn, model }">
      <a-input v-bind="bind" v-on="vOn" v-model:value="model.area"></a-input>
    </template>
  </MsuiForm>
</template>
<script setup>
import { MsuiFormModel } from 'msui'

const msuiForm = (() => {
  const form = new MsuiFormModel({
    projectYear: '立项年度',
    projectCode: '项目编号',
    projectName: '项目名称',
    type: '暂存标记',
    projectType: '项目类型',
    startDate: '开始日期',
    endDate: '结束日期',
    gongqi: '建设工期',
    districtDivisionId: '项目业主',
    constructionPurpose: '建设目的',
    status: '项目状态',
    terrain: '地形地貌',
    projectGrade: '耕地质量等级',
    area: '建设面积（亩）',
    basicsArea: '基础建设面积',
    liftingArea: '改造提升面积（亩）',
    irrigatedArea: '高效节水灌溉面积（亩）',
    constructionRegion: '建设所在地区',
    constructionAddress: '建设详细地址',
    projectTotalCapital: '项目总资金（万元）',
    channel: '中央资金渠道',
    centralFinancialFunds: '中央财政资金（万元）',
    localGovernmentInput: '地方政府投入（万元）',
    socialInput: '社会投入（万元）',
    capitalChannel: '资金渠道',
    content: '主要建设内容',
    remark: '项目备注',
    qrcode: '项目二维码'
  })
  form.isRequired(['remark', 'projectYear'])
  let {
    projectYear,
    projectType,
    qrcode,
    content,
    remark,
    type,
    projectCode,
    status,
    startDate,
    gongqi,
    districtDivisionId,
    constructionPurpose,
    terrain
  } = form.formModel
  terrain
    .type({
      bind: {
        checkedChildren: '开',
        unCheckedChildren: '关'
      },
      template: 'a-switch'
    })
    .setValue(true)

  constructionPurpose.type({
    template: 'a-slider'
  })

  startDate.type({
    bind: {
      style: { width: '100%' }
    },
    template: 'a-date-picker'
  })

  status.type({
    bind: {
      options: ['Apple', 'Pear', 'Orange']
    },
    template: 'a-checkbox-group'
  })

  districtDivisionId
    .type({
      template: 'a-rate'
    })
    .setValue(2)

  gongqi.type({
    bind: {
      optionType: 'button',
      options: [
        {
          label: '测试',
          value: 1
        },
        {
          label: '测试2',
          value: 2
        }
      ]
    },
    template: 'a-radio-group'
  })

  projectCode.type({
    bind: {
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake'
                }
              ]
            }
          ]
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men'
                }
              ]
            }
          ]
        }
      ]
    },
    template: 'a-cascader'
  })

  type.type({
    bind: {
      options: new Promise((res) => {
        setTimeout(() => {
          res([
            {
              value: '花冠军',
              label: '花冠军'
            },
            {
              value: '将万里',
              label: '将万里'
            },
            {
              value: '张计划',
              label: '张计划'
            }
          ])
        }, 1000)
      })
    },
    template: 'a-mentions'
  })

  content.type({
    bind: {
      type: 'textarea',
      rows: 2
    },
    template: 'a-textarea'
  })

  remark
    .type({
      bind: {
        type: 'textarea',
        rows: 6
      },
      template: 'a-textarea'
    })
    .setBind({
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      span: 24
    })

  //表单项设置
  qrcode
    .type({
      bind: {
        size: 120,
        color: 'blue'
      },
      template: 'a-qrcode'
    })
    .setValue('http://www.baidu.com')

  projectType.type({
    bind: {
      options: [
        {
          label: '显示开始日期',
          value: 1
        },
        {
          label: '隐藏开始日期',
          value: 2
        }
      ]
    },
    vOn: {
      change(val) {
        if (val == 2) {
          startDate.setShow(false)
        } else {
          startDate.setShow(true)
        }
      }
    },
    template: 'a-select'
  })

  projectYear.type({
    bind: {
      picker: 'year',
      valueFormat: 'YYYY',
      style: {
        width: '100%'
      }
    },
    vOn: {
      change: (value) => {
        console.log(value)
      }
    },
    template: 'a-date-picker'
  })

  //表单整体设置
  form
    .setBind({
      labelCol: { span: 8 },
      labelWrap: true,
      wrapperCol: { span: 16 },
      labelAlign: 'right',
      layout: 'horizontal',
      scrollToFirstError: true,
      span: 12,
      offset: 5
    })
    .setEvent({
      finish: (data) => {
        console.log(data)
      }
    })
    .setButtonOptions({
      bind: {
        wrapperCol: { span: 24 },
        style: {
          'text-align': 'center',
          'padding-bottom': '20px'
        }
      },
      buttonList: {
        button1: {
          bind: {
            text: '保存',
            type: 'primary',
            size: 'middle',
            htmlType: 'submit'
          }
        },
        button2: {
          bind: {
            text: '重置',
            type: 'default',
            size: 'middle'
          },
          vOn: {
            click: () => {
              console.log(msuiForm)
              msuiForm.vm.resetFields()
            }
          }
        }
      }
    })
  return form
})()
</script>
<style scoped lang="less"></style>
